import { computed, defineComponent, shallowRef, defineAsyncComponent } from 'vue'
import { includes } from 'lodash-es'

import { ElSelect, ElOption } from 'element-plus';
import 'element-plus/dist/index.css';
import metaConfig from './meta.js'

export const meta = metaConfig
/**
 * 支持配置：
 * 排列方式, layout
 */
export default defineComponent({
  name: 'SelectModule',
  props: {
    type: {
      type: String,
      default: ''
    },
    field: {
      type: String,
      default: ''
    },
    value: {
      type: [Array, String],
      default: () => {
        return []
      }
    },
    layout: {
      type: String,
      default: 'vertical'
    },
    options: {
      type: Array,
      default: () => []
    },
    readonly: {
      type: Boolean,
      default: false
    },
    maxNum: {
      type: [Number, String],
      default: 1
    }
  },
  emits: ['change'],
  setup(props, { emit }) {
    const disableState = computed(() => {
      if (!props.maxNum) {
        return false
      }
      return props.value.length >= +props.maxNum
    })
    const isDisabled = (item) => {
      const { value } = props
      return disableState.value && !includes(value, item.value)
    }
    const myOptions = computed(() => {
      const { options } = props
      return options.map((item) => {
        return {
          ...item,
          disabled: isDisabled(item)
        }
      })
    })
    const onChange = (value) => {
      const key = props.field
      emit('change', {
        key,
        value
      })
    }
    const handleSelectMoreChange = (data) => {
      const { key, value } = data
      emit('change', {
        key,
        value
      })
    }

    const selectMoreView = shallowRef(null)
    if (props.readonly) {
      selectMoreView.value = defineAsyncComponent(
        () => import('@materials/questions/QuestionContainerB')
      )
    } else {
      selectMoreView.value = defineAsyncComponent(
        () => import('@materials/questions/QuestionRuleContainer')
      )
    }
    const createRichTextLabel = (item) => {
      return item.text.replace(/<[^>]*>/g, '');
    }
    return {
      onChange,
      handleSelectMoreChange,
      myOptions,
      selectMoreView,
      createRichTextLabel
    }
  },
  render() {
    const { readonly, field, myOptions, onChange, value, createRichTextLabel } = this
    // console.log(this)
    let modelValue = value
    if (readonly) {
      return (
        <div class="input-wrapper">
          <input
            class={['input-box item-border']}
            type={this.type}
            field={this.field}
            readonly={this.readonly}
            value={this.value}
            autocomplete={'off'}
          />
        </div>
      )
    } else {
      return (
        <ElSelect
          field={field}
          readonly={readonly}
          v-model={modelValue}
          placeholder={'Select'}
          size={'large'}
          style={'width: 240px'}
          onChange={onChange}
        >
        {
          myOptions?.map((item) => 
          (<ElOption
            key={item.value}
            value={item.value}
            v-html={item.text}
            label={createRichTextLabel(item)}
          >
            <span v-html={item.text}></span>
            </ElOption>
            ))
          }
        </ElSelect>
      
      // <BaseChoice
      //   uiTarget="checkbox"
      //   readonly={readonly}
      //   name={field}
      //   maxNum={maxNum}
      //   options={myOptions}
      //   onChange={onChange}
      //   value={value}
      // >
      //   {{
      //     selectMore: (scoped) => {
      //       return (
      //         <selectMoreView
      //           readonly={this.readonly}
      //           showTitle={false}
      //           moduleConfig={scoped.selectMoreConfig}
      //           onChange={(e) => this.handleSelectMoreChange(e)}
      //         ></selectMoreView>
      //       )
      //     }
      //   }}
      // </BaseChoice>
      )
    }
  }
})
